<template>
  <div>
    <div class="pos">
      <Banner></Banner>
      <Swiper></Swiper>


    </div>
    <Hot class="Hot"></Hot>
    <New class="New"></New>
    <Brand></Brand>
    <Content></Content>
    <Special></Special>
   
  </div>
</template>

<script>
import Swiper from "@/erabbit/swiperParent.vue";
import Banner from "@/erabbit/banner.vue";
import New from '@/erabbit/Hot.vue'
import Hot from '@/erabbit/New.vue'
import Brand from '@/erabbit/Brand.vue'
import Special from '@/erabbit/Special.vue'
import Content from '@/erabbit/content.vue'

export default {
  name:'homes',
  components: {
    Swiper: Swiper,
    Banner: Banner,
    New:New,
    Hot:Hot,
    Brand:Brand,
    Special:Special,
    Content:Content,
  },
};
</script>

<style  scope >

.pos {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}
.Hot,.New{
  background-color: #fff;
  width: 100%;
}
</style>